<nav class="c-primary-nav" role="navigation">

	<ul class="c-primary-nav__list c-primary-nav__list--flush js-nav-panel" role="tablist" aria-multiselectable="true">

		<li class="c-primary-nav__item">
			<a href="{{ "/getting-started.html" | prepend: site.baseurl}}" class="c-primary-nav__link {% if page.url == '/getting-started.html' %}is-active is-current{% endif %}">
				<span class="c-primary-nav__text">Getting started</span>
			</a>
		</li><!-- end c-nav__list__item -->

		<li class="c-primary-nav__item {% if page.url contains '/guidelines' %}is-active{% endif %}">
			<a class="c-primary-nav__link c-primary-nav__link--has-children js-nav-dropdown-trigger {% if page.url contains '/guidelines' %} is-active is-current{% endif %}" href="{{ "/guidelines/" | prepend: site.baseurl }}">

				<span class="c-primary-nav__text">Guidelines</span>

				<svg class="c-icon c-primary-nav__icon" aria-hidden="true">
					<use href="{{ "/icons.svg#chevron-right" | prepend: site.baseurl }}"></use>
				</svg>

			</a>

			<ul class="c-primary-nav__sublist js-nav-dropdownn {% if page.url contains '/guidelines' %} is-active{% endif %}">
			{% for my_page in site.pages %}

				{% if my_page.group == "guidelines" %}
				<li class="c-primary-nav__item">
					<a class="c-primary-nav__link {% if my_page.url == page.url %}is-active is-current{% endif %}" href="{{ my_page.url | prepend: site.baseurl }}">
                    {% if my_page.title == "Guidelines" %}

                    <span class="c-primary-nav__text">Overview</span>

                    {% else %}

                    {{ my_page.title }}

                    {% endif %}
					</a>
				</li>
				{% endif %}

			{% endfor %}
			</ul>
		</li>


		<li class="c-primary-nav__item {% if page.url contains '/styles' %}is-active{% endif %}">

			<a href="{{ "/styles/index.html" | prepend: site.baseurl }}" class="c-primary-nav__link c-primary-nav__link--has-children js-nav-dropdown-trigger {% if page.url contains '/styles' %} is-active  is-current{% endif %}">

				<span class="c-primary-nav__span">Styles</span>

				<svg class="c-icon c-primary-nav__icon" aria-hidden="true">
					<use href="{{ "/icons.svg#chevron-right" | prepend: site.baseurl }}"></use>
				</svg>

			</a>

			<ul class="c-primary-nav__sublist js-nav-dropdown {% if page.url contains '/styles' %} is-active{% endif %}">
			{% for my_page in site.pages %}
				{% if my_page.title %}
					{% if my_page.group == "styles" %}
					<li class="c-primary-nav__item">
						<a class="c-primary-nav__link {% if my_page.url == page.url %}is-active is-current{% endif %}" href="{{ my_page.url | prepend: site.baseurl }}">
                        {% if my_page.layout == "landing" %}

                        <span class="c-primary-nav__text">Overview</span>

                        {% else %}

                        {{ my_page.title }}

                        {% endif %}
						</a>
					</li>
					{% endif %}
				{% endif %}
			{% endfor %}
			</ul>

		</li><!-- end c-nav__list__item -->

		<li class="c-primary-nav__item {% if page.url contains '/components' %}is-active{% endif %}">
			<a class="c-primary-nav__link c-primary-nav__link--has-children js-nav-dropdown-trigger {% if page.url contains '/components' %} is-active  is-current{% endif %}" href="{{ "/components/" | prepend: site.baseurl }}">

				<span class="c-primary-nav__text">Components</span>

				<svg class="c-icon c-primary-nav__icon" aria-hidden="true">
					<use href="{{ "/icons.svg#chevron-right" | prepend: site.baseurl }}"></use>
				</svg>

			</a><!--end c-primary-nav__link-->

			<ul class="c-primary-nav__sublist js-nav-dropdown {% assign post_index = '0' %}{% for my_page in site.pages %}{% if my_page.group == 'components' %}{% capture post_index %}{{ post_index | plus: '1' }}{% endcapture %}{% endif %}{% endfor %}{% if page.url contains '/components' %} is-active{% endif %}">

				{% include primary-nav-item.html label='Blocks and cards' subgroup='blocks-and-cards' %}

        {% include primary-nav-item.html label='Buttons' subgroup='buttons' %}

				{% include primary-nav-item.html label='Charts and graphs' subgroup='charts-and-graphs' %}

                {% include primary-nav-item.html label='Form controls' subgroup='form-controls' %}

				{% include primary-nav-item.html label='Headers and footers' subgroup='headers-and-footers' %}

                {% include primary-nav-item.html label='Icons' subgroup='icons' %}

                {% include primary-nav-item.html label='Interactive panels' subgroup='interactive' %}

                {% include primary-nav-item.html label='Lists and collections' subgroup='lists-and-collections' %}

                {% include primary-nav-item.html label='Media' subgroup='media' %}

                {% include primary-nav-item.html label='Messaging' subgroup='messaging' %}

                {% include primary-nav-item.html label='Navigation' subgroup='navigation' %}

                {% include primary-nav-item.html label='Tables' subgroup='tables' %}

                {% include primary-nav-item.html label='Text' subgroup='text' %}

			</ul>
		</li>

		<li class="c-primary-nav__item {% if page.url contains '/workflows' %}is-active{% endif %}">

			{% for my_page in site.pages %}
				{% if my_page.url == "/workflows.html" %}
				<a href="{{ "/workflows.html" | prepend: site.baseurl }}" class="c-primary-nav__link {% if page.url == '/workflows.html' %}is-active is-current{% endif %}">
					<span class="c-primary-nav__text">Workflows</span>
				</a>
				{% endif %}
			{% endfor %}

		</li><!-- end c-nav__list__item -->

        <li class="c-primary-nav__item {% if page.url contains '/utilities' %}is-active{% endif %}">

			<a href="{{ "/utilities/index.html" | prepend: site.baseurl }}" class="c-primary-nav__link c-primary-nav__link--has-children js-nav-dropdown-trigger {% if page.url contains '/utilities' %} is-active  is-current{% endif %}">

				<span class="c-primary-nav__span">Utilities</span>
				<svg class="c-icon c-primary-nav__icon" aria-hidden="true">
					<use href="{{ "/icons.svg#chevron-right" | prepend: site.baseurl }}"></use>
				</svg>

			</a>

			<ul class="c-primary-nav__sublist js-nav-dropdown {% if page.url contains '/utilities' %} is-active{% endif %}">
			{% for my_page in site.pages %}
				{% if my_page.title %}
					{% if my_page.group == "utilities" %}
					<li class="c-primary-nav__item">
						<a class="c-primary-nav__link {% if my_page.url == page.url %}is-active is-current{% endif %}" href="{{ my_page.url | prepend: site.baseurl }}">
                        {% if my_page.layout == "component-category" %}

                        <span class="c-primary-nav__text">Overview</span>

                        {% else %}

                        {{ my_page.title }}

                        {% endif %}
						</a>
					</li>
					{% endif %}
				{% endif %}
			{% endfor %}
			</ul>

		</li><!-- end c-nav__list__item -->

		<li class="c-primary-nav__item">

			{% for my_page in site.pages %}
				{% if my_page.url == "/page-templates.html" %}
				<a href="{{ "/page-templates.html" | prepend: site.baseurl }}" class="c-primary-nav__link {% if page.url == '/page-templates.html' %}is-active is-current{% endif %}">
					<span class="c-primary-nav__text">Page templates</span>
				</a>
				{% endif %}
			{% endfor %}

		</li><!-- end c-nav__list__item -->

		<li class="c-primary-nav__item">

			{% for my_page in site.pages %}
				{% if my_page.url == "/downloads.html" %}
				<a href="{{ "/downloads.html" | prepend: site.baseurl }}" class="c-primary-nav__link {% if page.url == '/downloads.html' %}is-active is-current{% endif %}">
					<span class="c-primary-nav__text">Downloads</span>
				</a>
				{% endif %}
			{% endfor %}

		</li><!-- end c-nav__list__item -->

		<li class="c-primary-nav__item">

			{% for my_page in site.pages %}
				{% if my_page.url == "/support.html" %}
				<a href="{{ "/support.html" | prepend: site.baseurl }}" class="c-primary-nav__link {% if page.url == '/support.html' %}is-active is-current{% endif %}">
					<span class="c-primary-nav__text">Support</span>
				</a>
				{% endif %}
			{% endfor %}

		</li><!-- end c-nav__list__item -->

		<li class="c-primary-nav__item">

			{% for my_page in site.pages %}
				{% if my_page.url == "/contribute.html" %}
				<a href="{{ "/contribute.html" | prepend: site.baseurl }}" class="c-primary-nav__link {% if page.url == '/contribute.html' %}is-active is-current{% endif %}">
					<span class="c-primary-nav__text">Contribute</span>
				</a>
				{% endif %}
			{% endfor %}

		</li><!-- end c-nav__list__item -->

	</ul><!-- end c-nav__list -->

</nav><!-- end c-nav -->
